<template>
    <div class="rankding">
        <sticky>
            <tab>
                <tab-item @on-item-click="tabclick" :selected="sindex === index" :key="index"
                          v-for="(item,index) in tabs">{{item.name}}
                </tab-item>
            </tab>
        </sticky>
        <section class="container">
            <scroller
                    :on-refresh="refresh"
                    :on-infinite="infinite">
                <div class="item-div" v-for="(itemtab,index) in tabs" :key="index" v-show="sindex===index">
                    <ul class="listcon" v-if="itemtab.items.length>0">
                        <li v-for="(tb ,kindex) in itemtab.items" :key="kindex" @click="jump(tb.di.uid)">
                            <b :class="['ranknum',kindex<3?'r r'+kindex:'']">{{tb.rank | getrank}}</b>
                            <div class="imghead">
                                <img :src="tb.di.avatar"
                                     :alt="tb.di.nick">
                                <i v-if="tb.di.recommend>0">{{tb.di.recommend}}</i>
                            </div>
                            <span class="middlename">
                                <strong>{{tb.di.nick}}</strong><em>{{tb.di.state}}</em>
                            </span>
                            <aside v-if="sindex!=1" class="rednum">
                                <strong>{{tb.di.combo}}</strong>
                                <b>连红</b>
                            </aside>
                            <aside v-else class="numbers">
                                <strong>{{tb.di.total1Month}}</strong>
                                <b>单</b>
                            </aside>
                        </li>
                    </ul>
                    <Nodata type="1" v-else></Nodata>
                </div>
            </scroller>
        </section>

    </div>
</template>

<script>
    import {getMyGodListsR, getMonyGodListsR, getShiLiGodListsR} from '../../service/god';
    import {isEmpty} from 'ramda';
    import {isphone, delay} from '../../uitls/common';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {Tab, TabItem, Sticky} from 'vux';
    import {concat} from 'ramda';
    import Nodata from '../../components/Nodata.vue';
    export default {
        components: {
            Nodata,
            Tab, TabItem, Sticky,
        },
        filters: {
            getrank(val){
                if(val <= 3) {
                    return ``
                }
                return val
            },
            getrankclass(index){
                if(index < 3) {
                    return `r r${index}`
                }
            }
        },
        data() {
            return {
                tabs: [{
                    name: '实力榜', page: 1,
                    items: [],
                    zj: null,
                    fn: getShiLiGodListsR
                }, {
                    name: '月人气榜', page: 1,
                    items: [],
                    zj: null,
                    fn: getMonyGodListsR
                }, {
                    name: '关注', page: 1,
                    items: [],
                    zj: null,
                    fn: getMyGodListsR,
                }],
                sindex: 0,
                index: 0,
                items: [],
                token: null
            };
        },
        created() {
            this.getDate(1);
        },
        computed: {
            getrankclass(index){
                if(index < 3) {
                    return `r r${index}`
                }
            }
        },
        mounted () {
        },
        methods: {
            async infinite(done){
                await delay(1000);
                const {sindex, tabs}=this;
                if(sindex != 2) {
                    done(true);
                    return;
                }
                tabs[sindex].page = tabs[sindex].page + 1;
                const over = await this.getDate(tabs[sindex].page, true);
                if(over) {
                    tabs[sindex].page = tabs[sindex].page - 1;
                    done(true);
                    return;
                }
                done();
            },
            async refresh(done){
                await delay(1000);
                await this.getDate(1);
                done();
            },
            async getDate (page, loadermore) {
                const {token}=await getMytoken(true);
                const {tabs, sindex}=this;
                const {data}= await tabs[sindex].fn(token, page);
                if(data && data.code === 0) {
                    const {zj, ranking}=data.data;
                    if(loadermore) {
                        if(ranking.length === 0) {
                            return true;
                        }
                        else {
                            tabs[sindex].items = concat(tabs[sindex].items, ranking);
                        }
                    }
                    else {
                        tabs[sindex].page = 1;
                        tabs[sindex].items = ranking;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async tabclick(index){
                this.sindex = index;
                const {tabs, sindex}=this;
                if(tabs[sindex].items.length === 0) {
                    await this.getDate(1);
                }
            },
            jump(id){
                this.$router.push(`/god/godinfo/${id}`)
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../app";

    .rankding {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        .container {
            display: flex;
            flex-direction: column;
            flex: 1;
            position: relative;
            .item-div {
                display: flex;
                flex-direction: column;
                flex: 1;
                position: relative;
                .listcon {
                    li {
                        .item();
                    }
                }
                .wrapper {
                    height: 100%;
                    overflow: hidden;
                }
                .pulldown-wrapper {
                    top: -100px;
                }
            }
            .nologin {
                display: flex;
                flex: 1;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .item () {
        height: 120px;
        box-sizing: border-box;
        border-bottom: 1px solid @color12;
        padding: 0 20px;
        background: #fff;
        display: flex;
        align-items: center;
        &:last-child {
            border: none;
        }
        .ranknum {
            border-radius: 50%;
            background: #f3f3f3;
            font-size: @fz26;
            color: @color2;
            width: 38px;
            .setnormalcss(38px);
            box-shadow: 0 2px 1px #b2b2b2;
            font-weight: bolder;
            &.r {
                width: 37px;
                height: 52px;
            }

            &.r0 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160543.png) no-repeat center;
                background-size: contain;
            }
            &.r1 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160544.png) no-repeat center;
                background-size: contain;
            }
            &.r2 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160545.png) no-repeat center;
                background-size: contain;
            }
        }
        .imghead {
            width: 88px;
            height: 88px;
            margin: 0 30px 0 20px;
            position: relative;
            i {
                position: absolute;
                background: @color22;
                color: #fff;
                width: 30px;
                font-size: @fz24;
                .setnormalcss(30px);
                border-radius: 50%;
                right: -10px;
                top: 0;
                display: block;
            }
            img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid #bebfbf;
            }
        }
        .middlename {
            flex: 1;
            display: flex;
            align-items: center;
            strong {
                font-size: @fz32;
                font-weight: bolder;
            }
            em {
                border: 1px solid @color22;
                border-radius: 32px;
                display: inline-block;
                .setnormalcss(32px);
                color: @color22;
                font-size: @fz24;
                width: 120px;
                margin-left: 10px;
            }
        }
        .rednum {
            display: flex;
            flex-direction: column;
            text-align: center;
            strong {
                font-size: @fz48;
                color: @color22;
                line-height: 1;
                font-weight: bolder;
            }
            b {
                line-height: 1;
                font-size: @fz24;
                color: @color3;
            }
        }
        .numbers {
            strong {
                font-size: @fz48;
                color: @color22;
                line-height: 1;
                font-weight: bolder;
            }
            b {
                line-height: 1;
                font-size: @fz24;
                color: @color3;
            }
        }
    }


</style>